<template>
  <div class="container">
    <Headbar />
    <HeadMenu />
    <div class="yh-layout-box wrap-comments-container">
      <div class="wrap-comments-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>买家中心</el-breadcrumb-item>
          <el-breadcrumb-item>订单中心</el-breadcrumb-item>
          <el-breadcrumb-item>评价列表</el-breadcrumb-item>
          <el-breadcrumb-item>评价</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="wraps-comments-inner">
        <div class="wrap-header">
          <div class="wrap-title fl">查看评价</div>
          <div class="wrap-title fr comments-tips" @click="handleAttention()">评价需知
            <img src="../../../assets/images/member/comment_ico03.png">
          </div>
        </div>
        <div class="wrap-comments-con">
          <div class="wrap-comments-detail">
            <div class="wrap-detail-left fl">
              <img class="detail-img" :src="URL.PIC + productPic">
              <p class="pd-title">{{ productName }}</p>
            </div>
            <div class="wrap-detail-right fl">
              <div class="wrap-commentsDetail">
                <div class="wrap-comments-item">
                  <div class="wrap-left-label fl">商品评分</div>
                  <div class="wrap-right-con fl">
                    <el-rate v-model="productScore" disabled="true"></el-rate>
                  </div>
                </div>
                <div class="wrap-comments-item">
                  <div class="wrap-left-label fl">商品评论</div>
                  <div class="wrap-right-con fl">
                    {{ content }}
                  </div>
                </div>
                <div class="wrap-comments-item">
                  <div class="wrap-left-label fl">商品图片</div>
                  <div class="wrap-right-con fl">
                    <div class="img" v-for="(item, i) in media">
                      <img :src="URL.PIC+item.url" class="imageViewer" @click="$imageViewer" />
                    </div> 
                   <!--  <el-upload
                            :action="URL.baseURL+'/file/img/upload'"
                            :headers="{
                        'Authorization': getAuthToken()
                      }"
                            :data="{
                        prefix: imgInfo.uploadImgUrl
                      }"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :on-success="handleSuccess"
                            :on-error="handleError"
                            :limit="5"
                            name="image"
                            list-type="picture-card">
                      <img src="../../../assets/images/member/comment_ico04.png" class="defaultImg">
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible" width="600px">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                    <p class="uploadImg-tips">可上传最多不超过5张图片</p> -->


                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="wrap-comments-detail wrap-detail-finish">
            <div class="wrap-detail-left fl">
              <img class="detail-img" src="../../../assets/images/member/comment_ico01.png">
              <p class="pd-title">施耐德 插拔式中间继电器 2副触点,5A,威武简约风格指示 灯,24VDC；RXM2LB2BD</p>
            </div>
            <div class="wrap-detail-right fl">
              <div class="comments-result">
                <div class="comments-msg">
                  <span class="comments-date">2019-03-25 10:12:01</span>
                  <el-rate
                    v-model="value"
                    disabled
                    text-color="#ff9900"
                    score-template="{value}">
                  </el-rate>
                </div>
                <div class="comments-text">
                  很不错，下次继续合作~
                </div>
                <div class="comments-pic">
                  <span class="comments-img" v-for="(item,i) in 4">
                  </span>
                </div>
              </div>
            </div>
          </div> -->
          <div class="wrap-comments-scores">
            <div class="wrap-scores-list fl">
              <span class="scores-header">货物是否与描述一致</span>
              <el-rate v-model="describeScore" disabled="true"></el-rate>
            </div>
            <div class="wrap-scores-list fl">
              <span class="scores-header">卖家服务态度评分</span>
              <el-rate v-model="serviceScore" disabled="true"></el-rate>
            </div>
            <div class="wrap-scores-list fl">
              <span class="scores-header">物流服务评分</span>
              <el-rate v-model="logisticsScore" disabled="true"></el-rate>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <Footbars/>
  </div>
</template>

<script>
import Headbar from '@/components/Layouts/Headbar'
import HeadMenu from '@/components/Layouts/HeadMenu'
import Footbars from '@/components/Layouts/Footbars'
import { evaluationDetail } from '@/api/order'
export default {
  name: 'CommentsDetail',
  components: {
    Headbar,
    HeadMenu,
    Footbars,
  },
  data() {
    return {
      evaluationId: this.getUrlParams('evaluationId'),
      orderId: '', //订单id
      productName: this.getUrlParams('productName'), //商品名称
      productId:  this.getUrlParams('productId'), //商品id
      productPic:  this.getUrlParams('productPic') ? decodeURIComponent(this.getUrlParams('productPic')) : "", //商品图片
      specifications:  '', //商品规格
      productSpecificationId:  '',//商品规格id
      content: '',//评论内容
      describeScore: 0,//货物是否与描述一致
      logisticsScore: 0,//物流服务评分
      productScore: 0,//商品分数
      serviceScore: 0,//卖家服务态度评分
      media: [],  //媒体实体   type媒体类型（图片：image、视频：video），url图片、视频地址
      mediaUrl: [],
      max: 100, //评价内容
      prefix: 'order/evaluation',  //图片上传文件夹标识
      imgInfo: {
        uploadImgUrl: 'order/evaluation'
      },
      dialogImageUrl: '',
      dialogVisible: false,
    }
  },
  created() {
    console.log(this.evaluationId)
    this.evaluationDetail(this.evaluationId);
  },
  methods: {
    handleAttention() {
      const h = this.$createElement;
      this.$msgbox({
        title: '评价须知',
        customClass: 'sales-msgbox',
        message: h('p', null, [
          h('p', { style: 'color: #999' }, '1. 您的评价将影响到卖家的好评率。请您根据实际交易情况，给予真实客观的评价。'),
          h('p', { style: 'color: #999' }, '2. 确认收货后的15天内，您可以对此次交易进行评价，超过15天未评价将默认好评。'),
          h('p', { style: 'color: #999' }, '3. 评价后的30天内，您有一次机会删除给卖家的评价，且可追加评价对该次交易重新进行评价。超出30天后，不可再追加评价。'),
          h('p', { style: 'color: #999' }, '4. 每次交易仅可追加一次评价。')
        ]),
        showCancelButton: false,
        showConfirmButton: false
      }).then(() => {
       
      }).catch(() => {
                
      });
    },
    evaluationDetail(evaluationId) {

      if(!this.evaluationId){
        //this.toast('评价主键不为空')
        return
      }

      const params = {
        "id": evaluationId
      }

      evaluationDetail(params).then(res => {
        if(res.code == 200){

          this.productScore = res.data.productScore;
          this.content = res.data.content;
          this.describeScore = res.data.describeScore;
          this.serviceScore = res.data.serviceScore;
          this.logisticsScore = res.data.logisticsScore;
          this.media = res.data.media;

        }else{
          this.$message({
            message: res.msg,
            type: 'success'
          });
        }
      })
    },

    //查看上传图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传之前
    beforeUpload(file, fileList) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isLt1M) {
        this.$message.error('上传的图片大小不能超过 1MB!');
        return false;
      }
    },
    // 上传成功
    handleSuccess(response, file, fileList) {
      this.getUploadImgs(fileList)
    },
    // 上传失败
    handleError(file) {
      this.actionsAfter('上传失败，请稍后再试！', 'error')
    },
    //删除上传图片
    handleRemove(file, fileList) {
      this.getUploadImgs(fileList)
    },
    getUploadImgs(fileList) {
      this.media = []
      for (var i in fileList) {
        if(fileList[i].response){
          this.media.push({
            type: 'image',
            url: fileList[i].response.data
          })
        }else{
          this.media.push({
            type: 'image',
            url: fileList[i].url
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/pages/comments.scss';
</style>
<style lang="scss">
  .wrap-comments-container{
    .el-upload-list--picture-card .el-upload-list__item{
      width: 62px;
      height: 62px;
      line-height: 62px;
    }
    .el-upload--picture-card{
      width: 60px;
      height: 60px;
      line-height: 60px;
      border: 1px solid #eee;
      border-radius: 5px;
      background: #f7f7f7;
      text-align: center;
      img{
        margin-top: 16px;
      }
    }
    .el-upload-list--picture-card .el-upload-list__item-actions span+span{
      margin-left: 5px;
    }
    .el-upload-list--picture-card .el-upload-list__item-status-label i{
      position: absolute;
      left: 14px;
    }
  }
  .wrap-right-con .img{
    display: inline-block;
    vertical-align: top;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border: 1px solid #eee;
    margin-right: 6px;
  }
  .wrap-right-con .img img{
    width: 60px;
    height: 60px;
  }
</style>
